<template>
<button
    v-if="link"
    type="button"
    :class="['button', 'btn-'+type, 'btn-'+size]"
    @click="handleClickTurnRoute"
>
    <slot>button</slot>
</button>
<button
    v-else
    type="button"
    :class="['button', 'btn-'+type, 'btn-'+size]"
>
    <slot>button</slot>
</button>
</template>

<script>
export default {
    name: "myButton",
    props: {
        type: { /* 类型 primary, save, edit, delete, search, add, reset, setting, back */
            type: String,
            default: "primary"
        },
        size: { /* 大小 big, default, small */
            type: String,
            default: "default"
        },
        link: { /* 是否可导航路由 */
            type: Boolean,
            default: false
        },
        /* 路由（string / object） */
        to: [String, Object]
    },
    methods: {
        handleClickTurnRoute() {
            this.$router.push(this.to).catch(err => err)
        }
    }
}
</script>

<style scoped>
.button {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    text-align: center;
    border: none;
    outline: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color 0.32s;
    cursor: pointer;
    box-sizing: border-box;
}
.btn-big { /* 80/32  120/42 */
   min-width: 120px;
   height: 42px;
   line-height: 42px;
   font-size: 18px;
}
.btn-default {
    min-width: 48px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
}
.btn-small {
    min-width: 42px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
}
.btn-primary {
    border: 1px solid  rgb(24, 111, 243);
    background-color: rgba(24, 111, 243, 0.4);
}
.btn-primary:hover {
    background-color: rgba(24, 111, 243, 0.8);
}
.btn-add {
    border: 1px solid  rgb(0, 255, 98);
    background-color: rgba(0, 255, 98, 0.4);
}
.btn-add:hover {
    background-color: rgba(0, 255, 98, 0.8);
}
.btn-delete {
    border: 1px solid  rgb(255, 0, 0);
    background-color: rgba(255, 0, 0, 0.4);
}
.btn-delete:hover {
    background-color: rgba(255, 0, 0, 0.8);
}
.btn-edit {
    border: 1px solid  rgb(255, 230, 0);
    background-color: rgba(255, 230, 0, 0.4);
}
.btn-edit:hover {
    background-color: rgba(255, 230, 0, 0.8);
}
.btn-search {
    border: 1px solid  rgb(109, 255, 187);
    background-color: rgba(109, 255, 187, 0.4);
}
.btn-search:hover {
    background-color: rgba(109, 255, 187, 0.8);
}
.btn-save {
    border: 1px solid  rgb(0, 255, 255);
    background-color: rgba(0, 255, 255, 0.4);
}
.btn-save:hover {
    background-color: rgba(0, 255, 255, 0.8);
}
.btn-reset {
    border: 1px solid  rgb(255, 0, 200);
    background-color: rgba(255, 0, 200, 0.4);
}
.btn-reset:hover {
    background-color: rgba(255, 0, 200, 0.8);
}
.btn-setting {
    border: 1px solid  rgb(126, 45, 255);
    background-color: rgba(126, 45, 255, 0.4);
}
.btn-setting:hover {
    background-color: rgba(126, 45, 255, 0.8);
}
.btn-back {
    border: 1px solid  rgb(255, 157, 66);
    background-color: rgba(255, 157, 66, 0.4);
}
.btn-back:hover {
    background-color: rgba(255, 157, 66, 0.8);
}
</style>